<template>
<div class="blank">
  <div class="header">
      <div class="header-left" @click="$router.go(-1)">
          <i class="iconfont icon-mjiantou-copy"></i>
      </div>
      <div class="header-in">查询能否开店</div>
      <div class="header-rigth"></div>
  </div>
  <div class="nav" @click="shou4 = false;">
    <mt-cell title="选择地区:" :value="areaString" is-link @click.native="handlerArea"></mt-cell>
    <mt-popup v-model="areaVisible" class="area-class" position="bottom">
      <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup>
  </div>
  <div class="nav-input">
    <span class="nav-input__tit">乡镇街道</span>
    <input placeholder="某街道或某镇、某村" v-model="d4" @click="hs2"/>
  </div>
  <mt-picker :slots="slots2" @change="onValuesChange2" style="padding:20px 100px;margin:0 auto;background-color: #fff;" v-if="shou4"></mt-picker>
  <div class="nav-input" @click="shou4 = false">
    <span class="nav-input__tit">详细地址</span>
    <input placeholder="详细地址" v-model="d5"/>
  </div>
  <div class="chaxun">
    <mt-button type="primary" @click="getdata()">查询</mt-button>
  </div>
  <div  v-if="notData">
    <p class="listItem" v-for="(i,b) in dianpu" :key="b">{{i.address}}</p>
  </div>

</div>


</template>

<script>

// 导入数据
import api from "@/fetch/api"
import { Button ,Toast,Picker } from 'mint-ui';
function setlocalStorage(storeName, storeData) {
 var storeStr = JSON.stringify(storeData);
 var storeArr = window.localStorage.setItem(storeName, storeStr);
 return storeArr;
};
function getlocalStorage(storeName, storeData){
 var storeName = localStorage.getItem(storeName);
 var storeArr = JSON.parse(storeName)
 return storeArr;
};

var data;
if(getlocalStorage('pca-code')){
   data = getlocalStorage('pca-code');
}else{
  var pcacode = require('../../../static/pca-code.json');
  //setlocalStorage('pca-code', pcacode);
  data = pcacode;
}

// // 请求三级联动
// const params = {};
// api.threeaddressCity(params)
//   .then(res => {
//     this.print(res.data);
//   })
//   .catch(error => {
//     this.print(error);
//     this.dianpu = res.data.address;
//   })

let index = 0
let index2 = 0
let index3 = 0
// 初始化省
let province = data.map(res => {
  return res.name
})
// 初始化市
let city = data[index].children.map(res => {
  return res.name
})
// 初始化区
let area = data[index].children[index2].children.map(res => {
  return res.name
})
  export default {
    name: 'FindShop',
    data() {
      return {
        dianpu:[],
        data: null,
        areaVisible: false,
        streetVisible: false,
        d1 :'',
        d2 :'',
        d3 :'',
        d4 :'',
        d5 :'',
        d1id:'',
        d2id:'',
        d3id:'',
        d4id:'',
        myaddress: '',
        shou4:false,
        areaString: '请选择',
        slots: [{
          flex: 1,
          values: province,
          className: 'slot1',
          textAlign: 'left'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: city,
          className: 'slot3',
          textAlign: 'left'
        }, {
          divider: true,
          content: '-',
          className: 'slot4'
        }, {
          flex: 1,
          values: area,
          className: 'slot5',
          textAlign: 'left'
        }],
        notData: false,
        slots2: [
        {
          flex: 1,
          values: [],
          className: 'slot2',
          textAlign: 'center'
        }
      ]
      };
    },
    components: {
      Button,
      Toast,Picker 
    },
     methods: {
      onValuesChange2(picker, values) {
          if (values[0] > values[1]) {
            picker.setSlotValue(1, values[0]);
          }
          console.log(values)
          this.d4 = values+"街道"
        },
        hs2(){
          console.log(this.d1,this.d2,this.d3)
          console.log('this.d1,this.d2,this.d3')
          if(this.d1&&this.d2&&this.d3){
            this.hs();
            shou4=true;    
            console.log("!52375327!")
          }else{
            console.log("!!!!!!!!!!!!")
          }

        },
      handlerArea() {
        this.areaVisible = true
      },
      // 获得省市县
      onValuesChange(picker, values) {
        let one = values[0]
        let two = values[1]
        let three = values[2]
        this.d1 = one
        this.d2 = two
        this.d3 = three
        console.log(this.d1)
        console.log(this.d2)
        console.log(this.d3)
        // console.log(three)
        // console.log(pcacode)

        index = province.indexOf(one)
        if (index >= 0 && province.length > 0) {
          city = data[index].children.map(res => {
            return res.name
          })
          picker.setSlotValues(1, city)
          two = values[1]
        }

        index2 = city.indexOf(two)
        if (index2 >= 0 && city.length > 0) {
          area = data[index].children[index2].children.map(res => {
            return res.name
          })
          picker.setSlotValues(2, area)
          three = values[2]
        }
        if(this.editState && this.editAddress){
          this.areaString = this.editAddress.province+','+this.editAddress.city+','+this.editAddress.quxian;
        }else{
          this.areaString = values.join(',')
          // this.areaString = '广东省,广州市,白云区'
        }
        this.editState = false
        if(this.d3!="东城区"){
          this.hs()
        }
      },
      
      
      hs(){
        var params={
        }
        api.fouraddress(params)
        .catch(res => {
            // console.log(999)
            console.log(res.data)
            for(var i =0;i<res.data.length;i++){
              console.log(res.data[i])
              if(this.d1==res.data[i].name){
                this.d1id=res.data[i].id
                console.log('this.d1id')
                console.log(this.d1id)
                // return;
              }
            }
              // 第二轮
              var params2={
                parent_id:Number(this.d1id) 
              }
              console.log(params2)
              console.log(5555)
              api.fouraddress(params2)
              .catch(res => {
                  // console.log(999)
                  console.log(res.data)
                  for(var i =0;i<res.data.length;i++){
                    console.log(res.data[i])
                    if(this.d2==res.data[i].name){
                      this.d2id=res.data[i].id
                      console.log('this.d2id')
                      console.log(this.d2id)
                    }
                  }
                  if(!this.d2id){
                  // 第三轮
                  var params3={
                      parent_id:Number(this.d1id) 
                    }
                    console.log(params3)
                    console.log(5555)
                    api.fouraddress(params3)
                    .catch(res => {
                        // console.log(999)
                        console.log(res.data)
                        for(var i =0;i<res.data.length;i++){
                          console.log(res.data[i])
                          if(this.d3==res.data[i].name){
                            this.d3id=res.data[i].id
                            console.log('this.d3id')
                            console.log(this.d3id)
                          }
                        }
                        if(!this.d3id){

                        }
                        // 第四轮    
                        var params4={
                          parent_id:Number(this.d3id) 
                        }
                        console.log(params4)
                        console.log(5555)
                        api.fouraddress(params4)
                        .catch(res => {
                            console.log(res.data)
                            this.list4 = res.data
                            var arr = []
                            for(var i=0;i< res.data.length;i++){
                              arr.push(res.data[i].name)
                            }
                            this.slots2[0].values=arr
                            console.log(arr)
                            this.shou4 = true
                          })  
                      })  

                  }
                    // 第三轮
                    var params3={
                      parent_id:Number(this.d2id) 
                    }
                    console.log(params3)
                    console.log(5555)
                    api.fouraddress(params3)
                    .catch(res => {
                        // console.log(999)
                        console.log(res.data)
                        for(var i =0;i<res.data.length;i++){
                          console.log(res.data[i])
                          if(this.d3==res.data[i].name){
                            this.d3id=res.data[i].id
                            console.log('this.d3id')
                            console.log(this.d3id)
                          }
                        }
                        if(!this.d3id){
                          console.log("00000000000000000000000000000")

                        }
                        // 第四轮    
                        var params4={
                          parent_id:Number(this.d3id) 
                        }
                        console.log(params4)
                        console.log(5555)
                        api.fouraddress(params4)
                        .catch(res => {
                            console.log(res.data)
                            this.list4 = res.data
                            var arr = []
                            for(var i=0;i< res.data.length;i++){
                              arr.push(res.data[i].name)
                            }
                            this.slots2[0].values=arr
                            console.log(arr)
                            this.shou4 = true
                          })  
                      })  
              })
       
          
          
          
            })
        
        
      },
      
      
      //点击查询按钮
      getdata () {
        console.log(this.myaddress)

        if(this.myaddress.indexOf("镇")>0){
            var i = this.myaddress.indexOf("镇")
            console.log(i)
            this.d4 =  this.myaddress.slice(0,i)
            this.d5 =  this.myaddress.slice(i+1)
            console.log(this.d4)
            console.log(this.d5)          
        }else if(this.myaddress.indexOf("街道")>0){
            var i = this.myaddress.indexOf("街道")
            console.log(i)
            this.d4 =  this.myaddress.slice(0,i)
            this.d5 =  this.myaddress.slice(i+2)
            console.log(this.d4)
            console.log(this.d5)   

        }


        if(this.d1&&this.d2&&this.d3&&this.d4){
          console.log("完整")
          let params1 ={
            province: this.d1,
            city:this.d2,
            county:this.d3,
            town:this.d4.slice(0,-2),
            address:this.d5,
          }
          api.selectAddress(params1)
          .catch(error => {
              this.print(error);
              console.log(666)
              console.log(error.data.msg)
              console.log(777)
              Toast({
                message: error.data.msg,
                duration: 3000
              });
            })
        }
        console.log(this.d1,this.d2,this.d3,this.d4,this.d5)
      },




    }
  };
</script>

<style lang="stylus" scoped>
.area-class {
  width: 100%;
  height: 50%;
}
.nav {
  height :50px;
  border-top: 1px solid #e5e5e5;
}
.nav-input {
  width:100%;
  height: 1.3rem;
  display: flex;
  flex:1;
  align-items:center;
  font-size:0.36rem;
  margin-top: 10px;
  padding:0 10px;
  background:#fff;
  /* border: 1px solid #ccc; */
  box-sizing:border-box;
  >input {
    display: block;
    flex: 1;
    height:100%;
    text-align :right;
    padding-left:10px;
  }
}
.chaxun{
  width :90%;
  margin:0 auto;
 margin-top:20px;
 height:1.3rem;
 padding-top:10px;
 margin-bottom: 20px;
}
.chaxun button{
  width: 100%;
}
p{
  padding-top:10px;
  border-top:1px  solid #ccc;
        }
.header
    width 100%
    height 1.45rem
    background white

    z-index 1
    .header-left
        width 10%
        height 100%
        float left
        i
            font-size: 0.6rem;
            line-height: 1.45rem;
            text-align: center;
            display: block;
    .header-in
        width: 80%;
        float: left;
        text-align: center;
        font-size: 0.45rem;
        line-height: 1.45rem;
    .header-rigth
        width 10%
        height 100%
        float left
.notDatas{
  padding: .6rem 0;
  text-align: center;
}
.listItem{
  padding-left: .4rem;
  line-height: 1.5rem;
  padding-top:0;
  background: #fff;
  border-top: 1px solid #eee;
}
</style>
